/******************** 变量 ********************/
$lv-breadcrumb-current-color: $text-color-tertiary !default;
$lv-breadcrumb-normal-color: $text-color !default;
$lv-breadcrumb-hover-color: $text-color-link !default;
$lv-breadcrumb-active-color: $text-color-link !default;
$lv-breadcrumb-disabled-color: $text-color-disabled !default;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: $height-sm;
  color: $text-color;
  font-size: $font-size-base;
  line-height: $line-height-base;

  div {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    > .breadcrumb-separator {
      padding: 0 $padding-sm;
      color: $lv-breadcrumb-normal-color;
      line-height: 0.2rem;

      i {
        margin-bottom: 0.02rem;
      }
    }

    > .breadcrumb-item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0;
      color: $lv-breadcrumb-normal-color;
      line-height: $line-height-base;
      cursor: pointer;

      @include motion-state;

      i.breadcrumb-icon {
        flex: 0 0 auto;
        margin-right: $margin-sm;
        color: $icon-color;
      }

      i.breadcrumb-trigger {
        flex: 0 0 auto;
        width: 0.13rem;
        height: 0.13rem;
        color: $icon-color;
      }

      > span {
        display: inline-block;
        width: 100%;
      }

      &:not([disabled]):hover {
        color: $lv-breadcrumb-hover-color;

        .breadcrumb-icon,
        .breadcrumb-trigger {
          color: $lv-breadcrumb-hover-color;
        }
      }

      &:not([disabled]):active {
        color: $lv-breadcrumb-active-color;

        .breadcrumb-icon,
        .breadcrumb-trigger {
          color: $lv-breadcrumb-active-color;
        }
      }

      &:not([disabled]).readonly {
        cursor: default;

        &:hover,
        &:active {
          color: $lv-breadcrumb-normal-color;

          > i {
            color: $icon-color;
          }
        }
      }

      &[disabled] {
        color: $lv-breadcrumb-disabled-color;
        cursor: not-allowed;

        > i {
          color: $lv-breadcrumb-disabled-color;
        }
      }
    }

    > .breadcrumb-item-current {
      color: $lv-breadcrumb-current-color;

      &:hover,
      &:active,
      &:not([disabled]).readonly,
      &:not([disabled]).readonly:hover,
      &:not([disabled]).readonly:active {
        color: $lv-breadcrumb-current-color;

        > i {
          color: $icon-color;
        }
      }
    }
  }
}
